<template>
  <div class="wrapper" ref="wrapper">
      <div class="content">
          <slot></slot>
      </div>
  </div>
</template>

<script>
import BScroll, { PullUpLoad } from 'better-scroll'
export default {
    name:'Scroll',
    props :{
        probeType:{
            type:Number,
            default:0
        },
        pullUpLoad:{
            type:Boolean,
            default:false
        }
        
    },
    data(){
        return {
            scroll:null
        }
    },
    mounted(){
        //1.创建BScroll对象
        
        this.scroll = new BScroll(this.$refs.wrapper, {
            click:true,
            probeType: this.probeType,
            pullUpLoad:this.pullUpLoad
        })
        //2.监听滚动的位置
        this.scroll.on('scroll',(position) => {
            // console.log(position)
            this.$emit('scroll',position)
        })
        //3.监听滚到底部 
        if(this.pullUpLoad){   //判断是否滑动到底部
            this.scroll.on('pullingUp',() => {
                this.$emit('pullingUp')
            })
        }

        

    },
    methods:{
        scrollTo(x, y, time=300){
            this.scroll.scrollTo(x,y,time)
        },
        finishPullUp(){
            this.scroll.finishPullUp()
        },
        refresh(){
            
            this.scroll && this.scroll.refresh() 
            console.log('-------')
        },
        getScrollY(){
            return this.scroll ? this.scroll.y : 0
        }
    }
}
</script>

<style>

</style>